<!-- @format -->
<template>
  <div @click="divClick">
    <!-- 1. .prenvet: 阻止默认行为 -->
    <a
      href="http://www.baidu.com"
      @click.prevent="goto1"
      >百度一下</a
    >

    <!-- 2.  .stop: 阻止冒泡 -->
    <button @click.stop="btnClick">点我干啥</button>

    <!-- 3. 修饰符可以链式调用，两个同时阻止，跟顺序无关 -->
    <a
      href="http://www.baidu.com"
      @click.prevent.stop="goto1"
      >百度一下</a
    >
    <a
      href="http://www.baidu.com"
      @click.stop.prevent="goto1"
      >百度一下</a
    >
  </div>
</template>

<script>
  export default {
    methods: {
      goto1() {},
      divClick() {
        console.log('divClick')
      },
      btnClick() {
        console.log('btnClick')
      }
    }
  }
</script>

<style></style>
